<template>
  <el-main>
    <h1>会员管理</h1>
    <div style="margin: 0.5rem">🐖</div>
    <div class="admin">
      <el-table
        :data="
          user.filter(
            (data) =>
              !search ||
              data.username.toLowerCase().includes(search.toLowerCase())
          )
        "
      >
        <el-table-column prop="username" label="用户名" />
        <el-table-column prop="signature" label="最后登录时间">
          <template #default="scope">
            {{
              (new Date() - new Date(scope.row.signature)) / 1000 < 60
                ? ((new Date() - new Date(scope.row.signature)) / 1000).toFixed(
                    0
                  ) + "秒内"
                : (new Date() - new Date(scope.row.signature)) / 1000 / 60 < 60
                ? (
                    (new Date() - new Date(scope.row.signature)) /
                    1000 /
                    60
                  ).toFixed(0) + "分钟内"
                : (new Date() - new Date(scope.row.signature)) /
                    1000 /
                    60 /
                    60 <
                  24
                ? (
                    (new Date() - new Date(scope.row.signature)) /
                      1000 /
                      60 /
                      60 +
                    1
                  ).toFixed(0) + "小时内"
                : (
                    (new Date() - new Date(scope.row.signature)) /
                      1000 /
                      60 /
                      60 /
                      24 +
                    1
                  ).toFixed(0) + "天内"
            }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <el-tag :type="scope.row.status == 'enable' ? 'success' : 'danger'">
              {{ scope.row.status == "enable" ? "启用" : "禁用" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #header>
            <el-input
              v-model="search"
              size="mini"
              placeholder="请输入商品名称"
              :suffix-icon="Search"
              maxlength="30"
            />
          </template>
          <template #default="scope">
            <el-button
              size="small"
              type="success"
              @click="handleReset(scope.row)"
              >重置密码</el-button
            >
            <el-button size="small" @click="handleEdit(scope.row)"
              >启用/禁用</el-button
            >
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.row)"
              >删除会员</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-main>
  <van-card
    num="2"
    tag="标签"
    price="10.00"
    desc="描述信息"
    title="商品标题"
    thumb="{{ imageURL }}"
  >
    <view slot="footer">
      <van-button size="mini">按钮</van-button>
      <van-button size="mini">按钮</van-button>
    </view>
  </van-card>
</template>
<script>
import { onBeforeMount, reactive, ref } from "vue";
import {
  get_user_list,
  delete_user,
  update_status,
  reset_password,
} from "@/api/admin";
import { ElMessage, ElMessageBox } from "element-plus";
import dayjs from "dayjs";
import { Search } from "@element-plus/icons-vue";

export default {
  setup() {
    const dateFormat = (time) => {
      return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
    };
    const newValues = {
      username: "",
      password: "",
      superuser: "0",
    };
    const admin = ref([]),
      addVisible = ref(false),
      editVisible = ref(false),
      editValues = reactive({}),
      search = ref(""),
      user = ref([]);
    // 显示所有会员的信息
    onBeforeMount(() => {
      get_user_list().then((res) => {
        if (res.data.success) {
          user.value = res.data.user_list;
        }
      });
    });
    // 启用禁用会员
    const handleEdit = (item) => {
      ElMessageBox.confirm("确认启/禁用该会员吗?", "警告", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        update_status(item).then((res) => {
          if (res.data.success) {
            ElMessage.success(res.data.message);
            user.value = res.data.user;
          }
        });
      });
    };
    //删除会员
    const handleDelete = (item) => {
      ElMessageBox.confirm("确认删除该会员吗?", "警告", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        delete_user(item).then((res) => {
          if (res.data.success) {
            ElMessage.success(res.data.message);
            user.value = user.value.filter((fil) => {
              return fil.id != item.id;
            });
          }
        });
      });
    };
    //重置密码
    const handleReset = (item) => {
      ElMessageBox.confirm("确认重置该会员的密码吗?", "警告", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        reset_password(item).then((res) => {
          if (res.data.success) {
            ElMessage.success(res.data.message);
          }
        });
      });
    };
    return {
      admin,
      newValues,
      addVisible,
      editVisible,
      editValues,
      dateFormat,
      Search,
      search,
      user,
      handleEdit,
      handleDelete,
      handleReset,
    };
  },
};
</script>
<style scoped>
.box {
  width: 90%;
  overflow-y: hidden;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  margin: auto;
  margin-top: 20px;
  border-radius: 4px;
  min-height: 36px;
  padding: 20px;
}
.admin {
  padding: 10px;
}
.user {
  height: 90%;
  overflow: hidden;
  border-radius: 10px;
  padding: 5px;
  background-color: #fff;
}
.el-main {
  background-color: #fff;
  min-height: 100vh;
}
.el-button + .el-button {
  margin-left: 0px;
}
.el-overlay > .el-message-box {
  width: 100px !important;
}
</style>
<style>
@media screen and (max-width: 600px) {
  .el-message-box {
    width: 240px;
  }
}
</style>
